<template>
  <div class="exam-container">
    <el-skeleton :loading="isFirst" :rows="15" animated>
      <div class="head-content-search">
        <div style="display: flex">
          <div class="exam-top-addbtn">
            <el-button size="small" type="primary" @click="addtestpaper">组卷</el-button>
          </div>

          <!-- 搜索框 -->
          <div class="mySearch" style="flex: 1">
            <el-input
              :width="150"
              v-model="key"
              placeholder="请输入你要查询的试卷名称"
              class="input-with-select"
            >
              <template #append>
                <el-button :icon="Search" />
              </template>
            </el-input>
          </div>

          <div class="myTips">
            <el-checkbox-group v-model="chosen" @change="checkStatus">
              <el-checkbox label="IsBan1">启用</el-checkbox>
              <el-checkbox label="IsBan2">禁用</el-checkbox>
              <el-checkbox label="IsPublish3">发布</el-checkbox>
              <el-checkbox label="IsPublish4">未发布</el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
      </div>

      <div style="margin-top: 10px">
        <el-table :data="data" v-loading="isLoad" :border="true">
          <el-table-column label="序号" type="index" width="60px"></el-table-column>
          <el-table-column
            label="试卷名"
            prop="name"
            :show-overflow-tooltip="true"
            class="last_commoner"
          >
          </el-table-column>
          <el-table-column label="类型" prop="type" width="100" :show-overflow-tooltip="true">
            <template #default="scope">
              <el-tag type="primary" size="small">
                {{ scope.row.type == 1 ? '普通试卷' : '高难度试卷' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="组卷" prop="mode" width="70">
            <template #default="scope">
              <el-tag type="primary" size="small">
                {{ scope.row.mode == 1 ? '人工' : '随机' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
            label="标签"
            prop="labels"
            :show-overflow-tooltip="true"
            width="100"
          ></el-table-column>
          <el-table-column
            label="难度"
            prop="lv"
            :show-overflow-tooltip="true"
            width="60"
          ></el-table-column>
          <el-table-column label="发布" prop="isPublish" width="60">
            <template #default="scope">
              <!-- 1.已经发布 0.没有发布 -->
              <el-tag
                type="success"
                size="small"
                v-if="scope.row.isPublish == 1 || scope.row.isPublish == null"
                >是</el-tag
              >
              <el-tag type="danger" size="small" v-if="scope.row.isPublish == 0">否</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="禁用" prop="isBan" width="60">
            <template #default="scope">
              <!-- 1.禁用 0.没禁用 -->
              <el-tag type="danger" size="small" v-if="scope.row.isBan == 1">是</el-tag>
              <!-- <el-tag type="success" size="small" v-else="scope.row.isBan == 0">否</el-tag> -->
              <el-tag type="success" size="small" v-else>否</el-tag>
            </template>
          </el-table-column>

          <el-table-column label="阅卷" prop="isCheck" width="60">
            <template #default="scope">
              <!-- 1.已经阅读danger 0.没有阅读success -->
              <el-tag
                type="success"
                size="small"
                v-if="scope.row.isCheck == 0 || scope.row.isCheck == null"
                >否</el-tag
              >
              <el-tag type="danger" size="small" v-if="scope.row.isCheck == 1">是</el-tag>
            </template>
          </el-table-column>

          <el-table-column label="题目数" prop="count" width="80" :show-overflow-tooltip="true">
            <template #default="scope">
              <el-tag type="primary" size="small"> {{ scope.row.count }}道 </el-tag>
            </template>
          </el-table-column>

          <el-table-column label="使用" prop="useCount" width="60">
            <template #default="scope">
              <!-- 1.已经阅读danger 0.没有阅读success -->
              <el-tag
                type="danger"
                size="small"
                v-if="scope.row.useCount == 0 || scope.row.useCount == null"
                >0</el-tag
              >
              <el-tag type="success" size="small" v-else>{{ scope.row.useCount }}</el-tag>
            </template>
          </el-table-column>

          <el-table-column label="平均分" prop="avgScore" width="80" :show-overflow-tooltip="true">
            <template #default="scope">
              <el-tag type="primary" size="small"> {{ scope.row.avgScore }}分 </el-tag>
            </template>
          </el-table-column>

          <el-table-column
            label="作者"
            prop="author"
            width="80"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            label="时间"
            prop="createTime"
            width="150"
            :show-overflow-tooltip="true"
          ></el-table-column>

          <el-table-column label="操作" fixed="right" width="200">
            <template #default="scope">
              <el-button
                type="primary"
                size="small"
                plain
                :loading="btnLoad"
                @click="testpaperDetail(scope.row)"
                v-if="scope.row.id != -1"
                >详情</el-button
              >

              <!-- 发布 -->
              <el-popconfirm
                title="确认要发布吗?"
                confirm-button-text="确认"
                cancel-button-text="取消"
                @confirm="IsPublish(scope.row, 1)"
              >
                <template #reference>
                  <el-button
                    type="success"
                    size="small"
                    v-if="
                      scope.row.isPublish == 0 &&
                      scope.row.isPublish != null &&
                      scope.row.isBan != null
                    "
                    :loading="btnLoad"
                    >发布</el-button
                  >
                </template>
              </el-popconfirm>

              <!-- 启用 -->
              <el-button
                type="success"
                size="small"
                plain
                @click="editIsBan(scope.row, 0)"
                v-if="scope.row.isBan == 1 && scope.row.isPublish == 1"
                :loading="btnLoad"
                >恢复</el-button
              >

              <!-- 删除 -->
              <el-popconfirm
                title="确认删除吗?"
                confirm-button-text="确认"
                cancel-button-text="取消"
                @confirm="deleteTestpaper(scope.row)"
              >
                <template #reference>
                  <el-button
                    type="danger"
                    size="small"
                    plain
                    v-if="scope.row.isPublish == 0 && scope.row.useCount == 0"
                    :loading="btnLoad"
                    >删除</el-button
                  >
                </template>
              </el-popconfirm>

              <!-- 取消发布 -->
              <el-popconfirm
                title="确认要取消发布吗?"
                confirm-button-text="确认"
                cancel-button-text="取消"
                @confirm="IsPublish(scope.row, 0)"
              >
                <template #reference>
                  <el-button
                    type="info"
                    size="small"
                    v-if="
                      scope.row.isPublish == 1 &&
                      scope.row.isBan == 0 &&
                      scope.row.useCount == 0 &&
                      scope.row.isPublish != null &&
                      scope.row.isBan != null
                    "
                    :loading="btnLoad"
                    >取消</el-button
                  >
                </template>
              </el-popconfirm>

              <!-- 禁用 -->
              <el-popconfirm
                title="确认禁用吗?"
                confirm-button-text="确认"
                cancel-button-text="取消"
                @confirm="editIsBan(scope.row, 1)"
              >
                <template #reference>
                  <el-button
                    type="danger"
                    size="small"
                    v-if="scope.row.isBan == 0 && scope.row.isPublish == 1"
                    :loading="btnLoad"
                    >禁用</el-button
                  >
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div
          style="
            margin-top: 10px;
            padding-bottom: 10px;
            display: flex;
            justify-content: space-between;
            border: 1px solid #eee;
          "
        >
          <el-pagination
            background
            @size-change="changLimit"
            layout="sizes,prev, pager, next,total"
            :total="total"
            small
            style="margin: 10px 0 0 10px"
            v-model:current-page="page"
            :page-sizes="[10, 20, 30, 40, 50]"
          />
        </div>
      </div>
    </el-skeleton>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, watchEffect } from 'vue'
// import type Loading from '@/dto/LoadDto'
import { Search } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { getTestPapers, PublishTestPapers,BanTestPapers,DeleteTestPapers } from '@/api/testpaper'
import type indexDto from '@/dto/exam/testpaper/indexDto'
import { ElMessage } from 'element-plus'

export default defineComponent({
  setup() {
    const router = useRouter()
    const data = reactive<indexDto>({
      data: [],
      page: 1,
      limit: 10,
      total: 0,
      key: '',
      isPublish: -1,
      isBan: -1,
      //选中的复选框的值存放
      chosen: [],
      //复选框的值截取后的值用于作为条件判断
      terms: [],
      //表格加载效果
      isLoad: true,
      //屏骨架加载效果
      isFirst: true,
      //点击按钮加载效果
      btnLoad: false
    })

    const events = {
      /**
       * 
       * @param val 删除试卷
       */
      deleteTestpaper:(val: any)=>{
        data.isLoad = true;
        DeleteTestPapers({ids:[val.id]}).then((res:any)=>{
          if(res.result===0){
              ElMessage.success(res.message);
              events.getTestPapers();
           }else{
            ElMessage.error(res.message);
            data.isLoad = false;
           }
        })
      },
 /**
       * 试卷的禁用与恢复
       * @param val
       */
      editIsBan:(val: any, num: number)=>{
        data.isLoad = true
        BanTestPapers({ids:[val.id],isBan:num}).then((res:any)=>{
          if(res.result===0){
              ElMessage.success(res.message);
              events.getTestPapers();
           }else{
            ElMessage.error(res.message);
            data.isLoad = false;
           }
        })
      },
      /**
       * 试卷的发布与取消发布
       * @param val
       */
      IsPublish: (val: any, num: number) => {
        data.isLoad = true
        PublishTestPapers({ ids: [val.id], isPublish: num }).then((res: any) => {
           if(res.result===0){
              ElMessage.success(res.message);
              events.getTestPapers();
           }else{
            ElMessage.error(res.message);
            data.isLoad = false;
           }
        })
      },
      /**
       * 题库管理试卷的详情
       */
      testpaperDetail: (val: any) => {
        router.push(`testpaper/detail/${val.id}`);
      },

      addtestpaper:()=>{
        router.push(`testpaper/addtestpaper`);
      },
      /**
       * 题库管理显示数据
       */
      getTestPapers: () => {
        data.isLoad = true
        getTestPapers({
          page: data.page,
          limit: data.limit,
          key: data.key,
          isPublish: data.isPublish,
          isBan: data.isBan
        }).then((res: any) => {
          data.data = res.data.data
          data.total = res.data.total
          data.isFirst = false
          data.isLoad = false
        })
      },
      /**
       * 改变每页的数据数量
       */
      changLimit: (val: any) => {
        data.limit = val;
      },

      /**
       * 复选框事件
       */
      checkStatus: () => {
        data.page = 1
        let sz: any = data.chosen
        data.terms = []
        //如果勾选的复选框大于2,就取消掉最开始勾选的
        if (sz.length > 2) {
          data.chosen?.shift()
        }

        sz.forEach((d: any, i: number) => {
          data.terms?.push(d.charAt(d.length - 1))
        })
        if (data.terms.includes('2') && data.terms.includes('3')) {
          //  console.log("查询已经发布的和已禁用");
          // events.queryAllQuestionChecks(1, 1)
          data.isPublish = 1
          data.isBan = 1
          events.getTestPapers()
          return
        }

        if (data.terms.includes('2') && data.terms.includes('4')) {
          //  console.log("查询未发布的和已禁用");
          // events.queryAllQuestionChecks(0, 1)
          data.isPublish = 0
          data.isBan = 1
          events.getTestPapers()
          return
        }

        if (data.terms.includes('1') && data.terms.includes('3')) {
          //  console.log("查询已发布的和启用");
          // events.queryAllQuestionChecks(1, 0)
          data.isPublish = 1
          data.isBan = 0
          events.getTestPapers()
          return
        }

        if (data.terms.includes('1') && data.terms.includes('4')) {
          //  console.log("查询未发布的和启用");
          // events.queryAllQuestionChecks(0, 0)
          data.isPublish = 0
          data.isBan = 0
          events.getTestPapers()
          return
        }

        if (data.terms.includes('1') && data.terms.includes('2')) {
          //  console.log("查询未发布的和发布");
          // events.getQuestion();
          data.isPublish = -1
          data.isBan = -1
          events.getTestPapers()
          return
        }

        if (data.terms.includes('3') && data.terms.includes('4')) {
          //  console.log("查询未禁用的和禁用");
          // events.getQuestion();
          data.isPublish = -1
          data.isBan = -1
          events.getTestPapers()
          return
        }

        if (data.terms.includes('3')) {
          //  console.log("查询已经发布的");
          // events.queryAllQuestionChecks(1, -1)
          data.isPublish = 1
          data.isBan = -1
          events.getTestPapers()
          return
        }

        if (data.terms.includes('2')) {
          //  console.log("查询已经禁用的");
          // events.queryAllQuestionChecks(-1, 1)
          data.isPublish = -1
          data.isBan = 1
          events.getTestPapers()
          return
        }

        if (data.terms.includes('4')) {
          //  console.log("查询未发布的");
          // events.queryAllQuestionChecks(0, -1)
          data.isPublish = 0
          data.isBan = -1
          events.getTestPapers()
          return
        }

        if (data.terms.includes('1')) {
          //  console.log("查询已经启用的");
          // events.queryAllQuestionChecks(-1, 0)
          data.isPublish = -1
          data.isBan = 0
          events.getTestPapers()
          return
        }

        data.isPublish = -1
        data.isBan = -1
        events.getTestPapers()
      }
    }
    watchEffect(() => {
      events.getTestPapers()
    })

    return {
      ...toRefs(data),
      ...events,
      Search
    }
  }
})
</script>

<style scoped>
.myTips {
  margin-right: 30px;
}
</style>

